<template>
    <h3>ScriptSetup</h3>
    <p>实时鼠标位置： {{x}},{{y}}</p>
    <hr>
    <p>state.name: {{state.name}}</p>
    <p>state.age: {{state.age}}</p>
    <p>name: {{name}}</p>
    <p>age: {{age}}</p>
    <p>xusui: {{xusui}}</p>
    <hr>
    <button @click="sayHello">sayHello</button>
</template>

<!-- 
所有内容都相当于直接写在setup函数里
所有内容自动作为一个整体对外导出
只要定义在代码最顶层的变量和方法都能被模板直接使用
 -->
<script setup>
import { reactive, toRefs, computed } from 'vue';
import useMousePosition from '../hooks/useMousePosition';

const { x, y } = useMousePosition()

const state = reactive({
    name: "steve",
    age: 18
})

const { name, age } = toRefs(state)

const xusui = computed(
    () => state.age + 1
)

setInterval(() => {
    state.age++
}, 1000);

const sayHello = () => {
    console.log("hello");
}
</script>